From d99a3524fd2649f1a9ce3623333de56a99e06971 Mon Sep 17 00:00:00 2001
From: secondl1ght <85003930+secondl1ght@users.noreply.github.com>
Date: Tue, 2 Aug 2022 13:23:59 -0600
Subject: lots of updates, implementing design, refactoring, bug fixes and more

---
 src/routes/[username]/support.svelte | 45 ++++++++++++++++++++++++++++++++++++
 1 file changed, 45 insertions(+)
 create mode 100644 src/routes/[username]/support.svelte

(limited to 'src/routes/[username]/support.svelte')

diff --git a/src/routes/[username]/support.svelte b/src/routes/[username]/support.svelte
new file mode 100644
index 00000000..7dd254c1
--- /dev/null
+++ b/src/routes/[username]/support.svelte
@@ -0,0 +1,45 @@
+<script>
+	// this needs to be hooked up to the backend
+	import { AppHeader } from '$comp';
+	import { user } from '$lib/store';
+</script>
+
+{#if $user}
+	<AppHeader />
+
+	<div class="my-20">
+		<h1 class="text-center text-4xl font-semibold mb-10">Support</h1>
+
+		<form class="space-y-5 mx-auto w-11/12 md:w-[350px]">
+			<div>
+				<label for="email" class="font-semibold">Email</label>
+				<input class="block border rounded-xl p-2 w-full" type="email" name="email" required />
+			</div>
+
+			<div>
+				<label for="account" class="font-semibold">Account Name</label>
+				<input
+					class="block border rounded-xl p-2 w-full"
+					type="text"
+					name="account"
+					required
+					disabled
+					value={$user.username}
+				/>
+			</div>
+
+			<div>
+				<label for="message" class="font-semibold">Message</label>
+				<textarea
+					rows={5}
+					class="block border rounded-xl p-2 w-full"
+					type="text"
+					name="message"
+					required
+				/>
+			</div>
+
+			<button class="bg-black text-white font-bold rounded-xl py-3 w-full mx-auto">Send</button>
+		</form>
+	</div>
+{/if}
-- 
cgit v1.2.3


From a421da7ca5e67972d833e36c5bd1cbf6bb76a477 Mon Sep 17 00:00:00 2001
From: secondl1ght <85003930+secondl1ght@users.noreply.github.com>
Date: Tue, 2 Aug 2022 14:33:58 -0600
Subject: add transactions page

---
 src/routes/[username]/dashboard.svelte    |  2 +-
 src/routes/[username]/support.svelte      |  2 +-
 src/routes/[username]/transactions.svelte | 48 ++++++++++++++++++++++++++++++-
 3 files changed, 49 insertions(+), 3 deletions(-)

(limited to 'src/routes/[username]/support.svelte')

diff --git a/src/routes/[username]/dashboard.svelte b/src/routes/[username]/dashboard.svelte
index 4c0e4cfc..6f38a812 100644
--- a/src/routes/[username]/dashboard.svelte
+++ b/src/routes/[username]/dashboard.svelte
@@ -36,7 +36,7 @@
 
 	<div class="px-3 md:px-0 flex justify-center items-center mt-10 lg:mt-0 mb-20">
 		<div>
-			<h1 class="text-4xl font-semibold mb-8">Dashboard</h1>
+			<h1 class="text-3xl md:text-4xl font-semibold mb-8">Dashboard</h1>
 
 			<span class="text-secondary mx-auto text-lg font-bold"
 				>Bitcoin Price: <span class="text-black">{$rate ? btcPrice : 'fetching rate...'}</span>
diff --git a/src/routes/[username]/support.svelte b/src/routes/[username]/support.svelte
index 7dd254c1..f974bd80 100644
--- a/src/routes/[username]/support.svelte
+++ b/src/routes/[username]/support.svelte
@@ -8,7 +8,7 @@
 	<AppHeader />
 
 	<div class="my-20">
-		<h1 class="text-center text-4xl font-semibold mb-10">Support</h1>
+		<h1 class="text-center text-3xl md:text-4xl font-semibold mb-10">Support</h1>
 
 		<form class="space-y-5 mx-auto w-11/12 md:w-[350px]">
 			<div>
diff --git a/src/routes/[username]/transactions.svelte b/src/routes/[username]/transactions.svelte
index 1935b156..bbcc0c23 100644
--- a/src/routes/[username]/transactions.svelte
+++ b/src/routes/[username]/transactions.svelte
@@ -1,5 +1,51 @@
 <script>
 	import { AppHeader } from '$comp';
+	import { user } from '$lib/store';
+
+	$: transactions = $user.payments;
 </script>
 
-<AppHeader />
+{#if $user}
+	<AppHeader />
+
+	<div class="my-20">
+		<h1 class="px-3 md:px-0 text-center text-3xl md:text-4xl font-semibold mb-10">
+			Transaction History
+		</h1>
+
+		<div class="max-w-5xl w-11/12 md:w-3/4 xl:w-1/2 mx-auto md:text-lg">
+			<div class="text-secondary flex justify-between mb-5">
+				<h2>AMOUNT</h2>
+				<h2>TIME</h2>
+			</div>
+
+			<div class="space-y-10">
+				{#if transactions.length}
+					{#each transactions as tx}
+						<div class="flex justify-between items-center border-b pb-5">
+							<div class="font-bold">
+								<span class="block mb-1"
+									>{new Intl.NumberFormat('en-US', {
+										style: 'currency',
+										currency: 'USD'
+									}).format(tx.amount * (tx.rate / 100000000))}
+								</span>
+
+								<span class="text-secondary"
+									>({new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(tx.amount)}
+									SATS)
+								</span>
+							</div>
+
+							<div class="text-secondary">
+								{new Date(tx.createdAt).toLocaleDateString(undefined, { dateStyle: 'medium' })}
+							</div>
+						</div>
+					{/each}
+				{:else}
+					<p class="text-secondary text-lg text-center">No transactions yet.</p>
+				{/if}
+			</div>
+		</div>
+	</div>
+{/if}
-- 
cgit v1.2.3


From 93f9d0abf58c5b5154e35b63524405554042bef1 Mon Sep 17 00:00:00 2001
From: secondl1ght <85003930+secondl1ght@users.noreply.github.com>
Date: Sat, 6 Aug 2022 00:04:55 -0600
Subject: finish withdraw UI, add more validation on support, bug fixes on tx
 hist

---
 src/lib/utils.js                          |  6 +-
 src/routes/[username]/dashboard.svelte    | 98 +++++++++++++++++++------------
 src/routes/[username]/settings.svelte     |  6 +-
 src/routes/[username]/support.svelte      | 19 +++++-
 src/routes/[username]/transactions.svelte | 12 ++--
 src/routes/withdraw.js                    |  3 +-
 6 files changed, 88 insertions(+), 56 deletions(-)

(limited to 'src/routes/[username]/support.svelte')

diff --git a/src/lib/utils.js b/src/lib/utils.js
index 24f94d40..b42fe970 100644
--- a/src/lib/utils.js
+++ b/src/lib/utils.js
@@ -19,11 +19,11 @@ export const get = (url, headers = { accept: 'application/json' }) =>
 		});
 
 export const post = (url, body, headers) => {
-  headers = { ...headers,  accept: 'application/json', 'content-type': 'application/json' };
+	headers = { ...headers, accept: 'application/json', 'content-type': 'application/json' };
 	return fetch(base + url, {
 		method: 'POST',
 		body: JSON.stringify(body),
-		headers 
+		headers
 	})
 		.then((r) => r.text())
 		.then((body) => {
@@ -38,7 +38,7 @@ export const post = (url, body, headers) => {
 
 			return body;
 		});
-}
+};
 
 export const copy = (text) => {
 	navigator.clipboard.writeText(text);
diff --git a/src/routes/[username]/dashboard.svelte b/src/routes/[username]/dashboard.svelte
index 7fab2125..d056399f 100644
--- a/src/routes/[username]/dashboard.svelte
+++ b/src/routes/[username]/dashboard.svelte
@@ -1,7 +1,7 @@
 <script>
 	import { post, failure } from '$lib/utils';
 	import { tick } from 'svelte';
-	import { AppHeader } from '$comp';
+	import { AppHeader, Icon } from '$comp';
 	import { rate, user, preferredCurrency } from '$lib/store';
 
 	let payreq = '',
@@ -19,8 +19,7 @@
 			await post('/withdraw', { payreq });
 			withdrawing = false;
 		} catch (e) {
-			console.log(e);
-      failure("Withdrawal failed, please contact support.");
+			failure(e.message);
 		}
 	};
 
@@ -58,43 +57,64 @@
 
 	<div class="px-3 md:px-0 flex justify-center items-center mt-10 lg:mt-0 mb-20">
 		<div>
-			<h1 class="text-3xl md:text-4xl font-semibold mb-8">Dashboard</h1>
-
-			<span class="text-secondary mx-auto text-lg font-bold"
-				>Bitcoin Price: <span class="text-black">{$rate ? btcPrice : 'fetching rate...'}</span>
-				{$preferredCurrency}
-			</span>
-
-			<span class="text-secondary block mt-1"
-				>Data from <span class="text-black">Binance</span>.
-			</span>
-
-			<h3 class="text-secondary font-bold border-b pb-1 mt-10 mb-6 w-full md:w-[500px]">
-				ACCOUNT BALANCE
-			</h3>
-
-			<span class="text-3xl font-bold block mb-1"
-				>{$rate ? accountBalanceFiat : 'fetching rate...'}</span
-			>
-
-			<span class="text-secondary text-xl block">{accountBalanceSats} SATS </span>
-
-			<button class="rounded-full border py-2 font-bold w-28 mt-4" on:click={toggle}
-				>Withdraw</button
-			>
-			<p class="text-secondary mt-2">You will be charged a 1% withdrawal fee on the payreq.</p>
-
-			{#if withdrawing}
-				<input
-					bind:this={payreqField}
-					type="text"
-					name="payreq"
-					bind:value={payreq}
-					class="block border rounded-xl p-3 w-full"
-				/>
-				<button class="rounded-full border py-2 font-bold w-28 mt-4" on:click={withdraw}
-					>Submit</button
+			<h1 class="text-3xl md:text-4xl font-semibold mb-8">
+				{withdrawing ? 'Withdraw' : 'Dashboard'}
+			</h1>
+			{#if !withdrawing}
+				<span class="text-secondary mx-auto text-lg font-bold"
+					>Bitcoin Price: <span class="text-black">{$rate ? btcPrice : 'fetching rate...'}</span>
+					{$preferredCurrency}
+				</span>
+
+				<span class="text-secondary block mt-1"
+					>Data from <span class="text-black">Binance</span>.
+				</span>
+
+				<h3 class="text-secondary font-bold border-b pb-1 mt-10 mb-6 w-full md:w-[500px]">
+					ACCOUNT BALANCE
+				</h3>
+
+				<span class="text-3xl font-bold block mb-1"
+					>{$rate ? accountBalanceFiat : 'fetching rate...'}</span
 				>
+
+				<span class="text-secondary text-xl block">{accountBalanceSats} SATS</span>
+
+				<button class="rounded-full border py-2 font-bold w-28 mt-4" on:click={toggle}
+					>Withdraw</button
+				>
+				<p class="text-secondary my-2">You will be charged a 1% withdrawal fee on the amount.</p>
+			{:else}
+				<div class="space-y-3 w-[250px] md:w-[500px] md:pr-20">
+					<button on:click={() => (withdrawing = false)}>
+						<Icon icon="arrow-left" style="w-8" />
+					</button>
+
+					<div>
+						<label for="invoice" class="font-bold mb-1 block">Invoice</label>
+						<input
+							bind:this={payreqField}
+							type="text"
+							name="payreq"
+							required
+							bind:value={payreq}
+							class="block rounded-2xl p-3 w-full bg-primary"
+						/>
+					</div>
+
+					<div>
+						<label for="note" class="font-bold mb-1 block">Note (Optional)</label>
+						<textarea name="note" rows={2} class="block rounded-2xl p-3 w-full bg-primary" />
+					</div>
+
+					<button
+						disabled={!payreq}
+						class="{!payreq
+							? 'opacity-50'
+							: 'opacity-100'} rounded-2xl border py-3 font-bold w-full mt-2 bg-black text-white"
+						on:click={withdraw}>Send</button
+					>
+				</div>
 			{/if}
 		</div>
 	</div>
diff --git a/src/routes/[username]/settings.svelte b/src/routes/[username]/settings.svelte
index 82ed7305..5abe58e0 100644
--- a/src/routes/[username]/settings.svelte
+++ b/src/routes/[username]/settings.svelte
@@ -73,11 +73,7 @@
 
 			<div>
 				<label for="address" class="font-bold mb-1 block">Business Address</label>
-				<input
-					type="text"
-					name="address"
-					class="block border rounded-xl p-3 w-full"
-				/>
+				<input type="text" name="address" class="block border rounded-xl p-3 w-full" />
 			</div>
 
 			<div>
diff --git a/src/routes/[username]/support.svelte b/src/routes/[username]/support.svelte
index f974bd80..335c804f 100644
--- a/src/routes/[username]/support.svelte
+++ b/src/routes/[username]/support.svelte
@@ -2,6 +2,8 @@
 	// this needs to be hooked up to the backend
 	import { AppHeader } from '$comp';
 	import { user } from '$lib/store';
+	let email;
+	let message;
 </script>
 
 {#if $user}
@@ -13,7 +15,13 @@
 		<form class="space-y-5 mx-auto w-11/12 md:w-[350px]">
 			<div>
 				<label for="email" class="font-semibold">Email</label>
-				<input class="block border rounded-xl p-2 w-full" type="email" name="email" required />
+				<input
+					class="block border rounded-xl p-2 w-full"
+					type="email"
+					name="email"
+					bind:value={email}
+					required
+				/>
 			</div>
 
 			<div>
@@ -35,11 +43,18 @@
 					class="block border rounded-xl p-2 w-full"
 					type="text"
 					name="message"
+					bind:value={message}
 					required
 				/>
 			</div>
 
-			<button class="bg-black text-white font-bold rounded-xl py-3 w-full mx-auto">Send</button>
+			<button
+				disabled={!email || !message}
+				class="{!email || !message
+					? 'opacity-50'
+					: 'opacity-100'} bg-black text-white font-bold rounded-xl py-3 w-full mx-auto"
+				>Send</button
+			>
 		</form>
 	</div>
 {/if}
diff --git a/src/routes/[username]/transactions.svelte b/src/routes/[username]/transactions.svelte
index 24e3e146..c91fd900 100644
--- a/src/routes/[username]/transactions.svelte
+++ b/src/routes/[username]/transactions.svelte
@@ -18,8 +18,8 @@
 		<div class="max-w-5xl w-11/12 md:w-3/4 xl:w-1/2 mx-auto md:text-lg">
 			<div class="text-secondary grid grid-cols-3 mb-5">
 				<h2>AMOUNT</h2>
-				<h2 class='text-center'>TYPE</h2>
-				<h2 class='text-right'>TIME</h2>
+				<h2 class="text-center">TYPE</h2>
+				<h2 class="text-right">TIME</h2>
 			</div>
 
 			<div class="space-y-10">
@@ -28,19 +28,21 @@
 						<div class="grid grid-cols-3 border-b pb-5">
 							<div class="font-bold">
 								<span class="block mb-1"
-									>{tx.amount > 0 && '+'}{new Intl.NumberFormat('en-US', {
+									>{tx.amount > 0 ? '+' : ''}{new Intl.NumberFormat('en-US', {
 										style: 'currency',
 										currency: 'USD'
 									}).format(tx.amount * (tx.rate / 100000000))}
 								</span>
 
 								<span class="text-secondary"
-									>{new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(tx.amount)}
+									>{tx.amount > 0 ? '+' : ''}{new Intl.NumberFormat('en-US', {
+										maximumFractionDigits: 0
+									}).format(tx.amount)}
 									SATS
 								</span>
 							</div>
 
-							<div class='text-center'>
+							<div class="text-center">
 								<span class="text-secondary">{tx.amount < 0 ? 'Sent' : 'Received'}</span>
 							</div>
 
diff --git a/src/routes/withdraw.js b/src/routes/withdraw.js
index aaed2250..818d39da 100644
--- a/src/routes/withdraw.js
+++ b/src/routes/withdraw.js
@@ -1,8 +1,7 @@
 import { post } from '$lib/utils';
 export async function POST({ locals, request }) {
 	let { token } = locals;
-  let body = await request.json();
-  console.log(body)
+	let body = await request.json();
 	body = await post('/lightning/send', body, {
 		authorization: `Bearer ${token}`
 	});
-- 
cgit v1.2.3